<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
        "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml"
	xmlns:ui="http://java.sun.com/jsf/facelets"
	xmlns:f="http://java.sun.com/jsf/core"
	xmlns:h="http://java.sun.com/jsf/html"
	xmlns:p="http://primefaces.org/ui">

<ui:include src="/WEB-INF/includes/head.xhtml">
	<ui:param name="pageTitle" value="Passengers" />
</ui:include>
<h:body>
	<ui:include src="/WEB-INF/includes/menu.xhtml" />
	<h1>Passengers</h1>
	<h:form id="form">

		<!-- Error messages -->
		<p:messages id="messages" autoUpdate="true" closable="true" />

		<p:panelGrid styleClass="noBorders">
			<p:row>
				<p:column>
					<h:outputLabel for="routeCombobox" value="Route" />
				</p:column>
				<p:column>
					<p:selectOneMenu id="routeCombobox"
						value="#{passengers.selectedRoute}" required="true"
						requiredMessage="Please select route">
						<f:selectItem itemLabel="-- Select route --" itemValue="" />
						<f:selectItems value="#{passengers.routes}" var="route"
							itemValue="#{route}" />
						<f:ajax listener="#{passengers.routeChanged}" render="tripCombobox" />
					</p:selectOneMenu>
				</p:column>
			</p:row>
			<p:row>
				<p:column>
					<h:outputLabel for="tripCombobox" value="Trip ID" />
				</p:column>
				<p:column>
					<p:selectOneMenu id="tripCombobox"
						value="#{passengers.selectedTrip}" required="true"
						requiredMessage="Please select trip">
						<f:selectItem itemLabel="-- Select trip ID --" itemValue="" />
						<f:selectItems value="#{passengers.trips}" var="trip"
							itemValue="#{trip}" />
						<f:ajax listener="#{passengers.tripChanged}" update="passengers_table" render="passengers_table" />
					</p:selectOneMenu>
				</p:column>
			</p:row>
			<p:row>
				<p:column>
					<p:spacer height="50" />
				</p:column>
			</p:row>
		</p:panelGrid>

		<!-- Passengers table -->
		<p:dataTable id="passengers_table" var="passenger"
			value="#{passengers.passengers}">
			<p:column headerText="ID">
				<h:outputText value="#{passenger.id}" />
			</p:column>
			<p:column headerText="Surname">
				<h:outputText value="#{passenger.surname}" />
			</p:column>
			<p:column headerText="Name">
				<h:outputText value="#{passenger.name}" />
			</p:column>
			<p:column headerText="Birthday">
				<h:outputText value="#{passenger.birthday}" />
			</p:column>
			<p:column headerText="Start station">
				<h:outputText value="#{passenger.startStation}" />
			</p:column>
			<p:column headerText="Finish station">
				<h:outputText value="#{passenger.finishStation}" />
			</p:column>
		</p:dataTable>
	</h:form>

</h:body>
</html>